<template>
  <a-modal
    title="更新申请凭证"
    :width="1500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :okButtonProps="{style:{display:'none'}}"
    @cancel="handleCancel"
    cancelText="关闭"
    style="top:20px;"
  >
    <a-card :bordered="true">
      <div class="title">商品信息</div>
      <a-table
        style="margin-bottom: 24px"
        rowKey="id"
        bordered
        :scroll="{ x: 800 }"
        :columns="goodsColumns"
        :pagination="false"
        :dataSource="goodsData">
        <div slot="returnFileList" slot-scope="returnFileList, row">
          <a-upload
            :showUploadList="false"
            :action="uploadAction"
            :data="{'isup':1,'dir':'returnOrder/certificate'}"
            :headers="headers"
            :beforeUpload="beforeUpload"
            @change="handleChange"
          >
            <a-button type="primary"><a style="padding-left: 10px" href="#" @click="setItemId(row.id)">上传</a></a-button>
          </a-upload>
          <div :key="index" v-for="(file, index) in returnFileList">

            <a :href="file.url" target="_blank">{{ file.name }}</a>
            <a style="padding-left: 10px" href="#" @click="deleteFile(returnFileList,index,row.id)">删除</a>
          </div>
        </div>
      </a-table>
    </a-card>


    <oms-order-trace-modalJX ref="OmsOrderTraceModalJX"/>

    <oms-order-process-memo-modal ref="OmsOrderProcessMemoModal"/>

  </a-modal>

</template>

<script>
import {httpAction, putAction, postAction, getAction} from '@/api/manage'
import DetailList from '@/components/tools/DetailList'
import ABadge from "ant-design-vue/es/badge/Badge"
import OmsOrderTraceModalJX from './OmsOrderTraceModalJX'
import OmsOrderProcessMemoModal from './OmsOrderProcessMemoModal'
import {mergeSameProducts} from '@/utils/util'
import {ACCESS_TOKEN} from "@/store/mutation-types";
import Vue from "vue";

const DetailListItem = DetailList.Item

export default {
  name: "ReturnOrderImageEditModal",
  components: {
    ABadge,
    DetailList,
    DetailListItem,
    OmsOrderTraceModalJX,
    OmsOrderProcessMemoModal
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      instructionList: [],
      inspectionReport: [],
      returnOrderEditColumns: [],
      itemId: 0,
      model: {},
      url: {
        omsOrderItem: {
          list: '/oms/omsOrder/queryOmsOrderItemByMainId'
        },
        omsOrderInvoice: {
          list: '/oms/omsOrder/queryOmsOrderInvoiceByMainId'
        },
        fileUpload: window._CONFIG['domianURL'] + "/sys/common/ossUpload",
        returnOrderItem: '/returns/omsOrderReturnItem/returnOrderItem',
        deleteCertificate: '/returns/omsOrderReturnItem/deleteCertificate',
        uploadCertificate: '/returns/omsOrderReturnItem/uploadCertificate',

      },
      goodsColumns: [
        {
          title: '商品名称',
          key: 'productName',
          width: 150,
          dataIndex: 'productName'
        },
        {
          title: '物料编码',
          key: 'productSkuCode',
          width: 140,
          dataIndex: 'productSkuCode'
        },
        {
          title: '申请凭证',
          key: 'returnFileList',
          width: 140,
          dataIndex: 'returnFileList',
          scopedSlots: {customRender: "returnFileList"},
        },
      ],

      goodsData: [],
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = {"X-Access-Token": token};
  },
  computed: {
    uploadAction: function () {
      return this.url.fileUpload;
    }
  },
  methods: {

    show(record) {
      console.log(record);
      this.instructionList = [];
      this.inspectionReport = [],
        this.returnOrderEditColumns = [];
      this.goodsData = [];
      this.visible = true;
      this.model = Object.assign({}, record);
      if (record != {} && record.returnCertificate != null && record.returnCertificate.length > 0) {
        this.instructionList = eval(record.returnCertificate);
      }
      if (record != {} && record.inspectionReport != null && record.inspectionReport.length > 0) {
        this.inspectionReport = eval(record.inspectionReport);
      }
      // 加载子表数据
      if (this.model.id) {
        console.log(this.model.id);
        this.loadGoodsData();

      }
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    loadGoodsData() {
      var params = {applyId: this.model.id};
      this.loading = true;
      getAction(this.url.returnOrderItem, params).then((res) => {
        if (res.success) {
          this.goodsData = res.result;
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    },
    handleCancel() {
      this.close()
    },
    handleTrace() {
      this.$refs.OmsOrderTraceModalJX.show(this.model);
    },
    handleProcessMemo() {
      this.$refs.OmsOrderProcessMemoModal.show(this.model);
    },
    handleConfirm() {
      if (this.model.payStatus !== 4 || this.model.status !== 0) {
        this.$message.warning('确认订单只允许选择已支付并且未确认的订单！')
        return
      }
      var ids = [this.model.id]
      var that = this
      this.$confirm({
        title: '确认订单',
        content: '是否确认选中的订单?',
        onOk: function () {
          that.loading = true
          postAction(that.url.confirmBatch, ids).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.model.status = 1;
              that.model.status_dictText = "已确认";
              that.$emit('ok');
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.loading = false
          })
        }
      })
    },
    deleteFile(returnFileList, index, id) {
      returnFileList.splice(index, 1);
      var that = this
      let certificate = JSON.stringify(returnFileList);
      let param = {};
      param.id = id;
      param.returnCertificate = certificate;
      postAction(that.url.deleteCertificate, param).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loadGoodsData();
          that.$emit('ok');
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.loading = false
      })
    },
    beforeUpload: function (file) {
      var fileType = file.type;
      //TODO 验证文件大小
    },
    handleChange(info) {
      var that = this
      if (info.file.status === 'uploading') {
        this.uploadLoading = true;
        return
      }
      if (info.file.status === 'done') {
        var response = info.file.response;
        this.uploadLoading = false;
        console.log(response);
        if (response.success) {
          console.log("success")
          let returnFile = {};
          returnFile.name = response.result.fileName;
          returnFile.url = response.result.url;
          returnFile.type = "image";

          let param = {};
          param.id = this.itemId;
          param.returnCertificate = JSON.stringify(returnFile);

          postAction(that.url.uploadCertificate, param).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.loadGoodsData();
              that.$emit('ok');
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.loading = false
          })

        } else {
          this.$message.warning(response.message);
        }
      }
    },
    setItemId(id) {
      this.itemId = id;
    }
  }
}
</script>

<style lang="less" scoped>
.operate-container {
  background: #F2F6FC;
  height: 80px;
  margin: -25px -25px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.title {
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}

.color-danger {
  color: #F56C6C;
  font-size: 18px;
  font-weight: 800;
}

.ant-modal-footer {
  padding: 10px 16px;
  text-align: right;
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
  display: none;
}
</style>
